<template>
  <el-container>
    <el-main>
      <el-dialog
        v-if="essayDetailData"
        :title="essayDetailData.name"
        :visible.sync="essayDetailVisiable"
        width="100%"
        style="height: 100%"
        @close="handleEssayDetailDialogClose"
      >
        <span>
          <span style="font-weight: 700">no：{{ essayDetailData.no }}</span>
          <div class="mask">
            <el-row :gutter="30">
              <el-col :span="8" :offset="0">
                <el-card>
                  <div class="sliderMask">
                    <div class="sliderContent">
                      <div>
                        出版单位:
                        <span>{{ essayDetailData.publisher }}</span>
                      </div>
                      <div>
                        论文范围:
                        <span>{{ essayDetailData.publish_scope }}</span>
                      </div>
                      <div>
                        出版时间:
                        <span>{{ essayDetailData.publish_time }}</span>
                      </div>
                      <div>
                        学科分类：
                        <span>{{
                          essayDetailData.subject_classification
                        }}</span>
                      </div>
                      <div>
                        通过状态:
                        <span>
                          <span v-if="essayDetailData.status == 1">已通过</span>
                          <span v-else-if="essayDetailData.status == 0"
                            >未通过</span
                          ></span
                        >
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="16" :offset="0">
                <el-card width="90%">
                  <div class="contentMask">
                    <div>
                      <h3>摘要</h3>
                      <p>{{ essayDetailData.abstract }}</p>
                    </div>

                    <div>
                      论文类型：
                      <span>{{ essayDetailData.category }}</span>
                    </div>

                    <div>
                      附件：
                      <el-link
                        type="primary"
                        :underline="false"
                        :href="`http://localhost:3000${essayDetailData.essayfile}`"
                        target="_blank"
                      >
                        <span class="file">{{
                          this.essayfileArr[this.essayfileArr.length - 1]
                        }}</span>
                      </el-link>
                    </div>
                  </div>
                </el-card>
                <el-card width="90%">
                  <div class="footMask">
                    <div>
                      第一作者:
                      <span>{{ essayDetailData.author.split(",")[0] }}</span>
                    </div>
                    <div>
                      第一作者单位:
                      <span>{{ essayDetailData.author_unit }}</span>
                    </div>
                    <div>
                      其他作者:
                      <span>{{
                        essayDetailData.author.split(",").slice(1).join("")
                      }}</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "myEssayDetail",
  data() {
    return {
      essayDetailVisiable: false,
      essayDetailData: "",
      essayfileArr: "",
    };
  },
  methods: {
    handleEssayDetailDialogClose() {
      this.essayDetailVisiable = false;
    },
    essayDetailShow(data) {
      this.essayDetailVisiable = true;
      this.essayDetailData = data;
      this.essayfileArr = this.essayDetailData.essayfile.split("/");
    },
  },
  mounted() {
    this.$bus.$on("handleEssayDetailShow", this.essayDetailShow);
  },
  beforeDestroy() {
    this.$bus.$off("handleEssayDetailShow");
  },
};
</script>

<style lang="less" scoped >
// 样式设计
/deep/.el-row {
  margin-right: 0px !important;
}

/deep/.el-dialog__body {
  box-sizing: border-box;
  padding: 30px 20px;
  padding-top: 0px;
}
// 关闭图表
/deep/.el-dialog__headerbtn .el-dialog__close {
  color: black;
  font-size: 24px;
}
/deep/.el-dialog {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.mask {
  overflow: hidden;
  width: 100%;
  height: 0vh;
  animation: maskAni 1s forwards;
  transition: all 1s;
}
@keyframes maskAni {
  100% {
    height: 84vh;
  }
}
//
.sliderMask {
  height: 78vh;
}
// slider
.sliderContent {
  // display: flex;
  // flex-direction: column;
  font-size: 18px;
  div {
    margin-bottom: 24px;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}
.contentMask {
  height: 60vh;
  div {
    font-size: 16px;
    p {
      text-indent: 2em;
      margin-bottom: 20px;
    }
    margin-bottom: 10px;
  }
  .file {
    color: red;
    cursor: pointer;
  }
}
.footMask {
  height: 12.5vh;
  font-size: 18px;
  div {
    margin-bottom: 24px;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}
</style>